<template>
	<view class="book-container">
		<view class="qrcode-box">
			<tkiQrcodeVue ref="qrcode" onval :val="dataDetail.patId" :size="200" :load-make="true"
				:show-loading="false" />
			<view class="clinic-no mar-5">门诊号：{{ dataDetail.patId }}</view>
		</view>
		<view class="book-card">
			<view class="book-header">
				<view class="title-container">
					<view class="book-dept">预约信息</view>
					<view class="title-bg"></view>
				</view>
				<view class="book-status">已预约</view>
			</view>
			<view class="book-row border">
				<view class="label">检查项目 ：</view>
				<view class="value right">{{ dataDetail.name }}</view>
			</view>
			<view class="book-row border">
				<view class="label">就诊人 ：</view>
				<view class="value right">{{ dataDetail.patName }}</view>
			</view>
			<view class="book-row border">
				<view class="label">就诊科室 ：</view>
				<view class="value right">{{ dataDetail.departmentName }}</view>
			</view>
			<view class="book-row border">
				<view class="label">就诊位置 ：</view>
				<view class="value right vital">{{ dataDetail.departmentAddress }}</view>
			</view>
			<view class="book-row border">
				<view class="label">检查室 ：</view>
				<view class="value right">{{ dataDetail.execDeptName }}</view>
			</view>
			<view class="book-row border" v-if="dataDetail.visitTime">
				<view class="label">预约时间 ：</view>
				<view class="value right vital">{{ dataDetail.visitTime }}</view>
			</view>
			<view class="book-row border" v-if="dataDetail.visitArea">
				<view class="label">时间区域 ：</view>
				<view class="value right vital">{{ dataDetail.visitArea }}</view>
			</view>
			<view class="book-row border" v-if="dataDetail.visitNo">
				<view class="label">检查序号 ：</view>
				<view class="value right vital">{{ dataDetail.visitNo }}</view>
			</view>
			<view class="book-row noborder" v-if="dataDetail.describe">
				<view class="label vital">注意事项 ：</view>
				<view class="value right">{{ dataDetail.describe }}</view>
			</view>
			<view class="book-divider"></view>
			扫描门诊号报道成功后，点击刷新按钮，可以查看检查序号
			<view class="flush-btn-row">
				<view class="flush-btn" @click="freshVisitNo">刷新</view>
			</view>
		</view>
		<button v-if="dataDetail.payStatus==0" class="reviese-btn" @click="toUpdatePage">修改预约</button>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		dateFormat
	} from '../../../utils/assist';
	import tkiQrcodeVue from '../../../components/QrCode/tki-qrcode.vue';
	import {
		selfBillingSelect
	} from '../../../api/selfBilling';
	export default {
		components: {
			tkiQrcodeVue
		},
		data() {
			return {
				dataDetail: {},
			}
		},
		onLoad(e) {
			this.dataDetail = JSON.parse(e.item);
			if (this.dataDetail.visitTime) {
				this.dataDetail.visitTime = dateFormat("yyyy-MM-dd", new Date(this.dataDetail.visitTime))
			}
			console.log(this.dataDetail)
		},
		mounted() {

		},
		computed: {

		},
		methods: {
			toUpdatePage() {
				uni.navigateTo({
					url: '/pages/Home/ServePatient/SelfBillingBook?item=' + JSON.stringify(this.dataDetail)
				})
			},
			freshVisitNo() {
				selfBillingSelect({
					preId: this.dataDetail.preId
				}).then(res => {
					console.log(res)
					if (res.length > 0) {
						this.$refs.uToast.show({
							title: '刷新成功',
							type: 'success',
						})
						this.dataDetail = res[0]
						if (this.dataDetail.visitTime) {
							this.dataDetail.visitTime = dateFormat("yyyy-MM-dd", new Date(this.dataDetail
								.visitTime))
						}
					}
				})
			}
		},
	}
</script>
<style lang='scss' scoped>
	@import './components/Technology/card.scss';

	.book-container {
		height: 100vh;
		padding: 20rpx 20rpx 0;
	}

	.qrcode-box {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0rpx 2rpx 12rpx rgba(0, 0, 0, 0.08);
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 0 20rpx;
		padding: 40rpx 0 20rpx;
	}

	.qrcode {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 10rpx;
	}

	.clinic-no {
		color: #888;
		font-size: 28rpx;
		margin-bottom: 8rpx;
	}

	.book-row.border {
		border-bottom: 1px solid #f0f0f0;
		padding: 8rpx 6rpx 24rpx;
	}

	.book-row.noborder {
		padding: 8rpx 6rpx 24rpx;
	}

	.value.right {
		text-align: right;
	}

	.flush-btn-row {
		display: flex;
		justify-content: flex-end;
	}

	.flush-btn {
		width: 32%;
		height: 56rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 28rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 56rpx;
		border: none;
	}

	.reviese-btn {
		width: 90%;
		margin: 30rpx 5% 0 5%;
		height: 72rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 30rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 72rpx;
		box-shadow: 0 4rpx 12rpx rgba(65, 207, 230, 0.15);
		border: none;
		margin-bottom: 12rpx;
	}

	.vital {
		color: #ca3333;
	}
</style>